<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/plu/layui/css/layui.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 16px;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">关键字</label>
        <div class="layui-input-inline">
            <input type="text" id="keyword" name="keyword" placeholder="请输入关键字" class="layui-input">
        </div>
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-primary" id="query">
                <i class="layui-icon layui-icon-search"></i> 搜索数据
            </button>

            <button type="button" class="layui-btn layui-btn-primary" id="delete">
                <i class="layui-icon layui-icon-delete"></i> 批量删除
            </button>
        </div>
    </div>
</form>
<table id="test" layui-filter="test"></table>
<script type="text/html" id="opera">
    <div class="layui-btn-group">

        <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
    </div>
</script>
<script src="/plu/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        let $ = layui.jquery;

        $("#delete").click(function () {
            let id = "";
            let data = layui.table.checkStatus("test").data;
            if (data.length === 0) {
                alert("尚未选择数据~");
                return;
            }
            layui.jquery.each(data, function (position, item) {
                id = id + item.member_id + ',';
            });
            layui.jquery.ajax({
                //接口地址
                url: "/api/member/del?id=" + id,
                //提交方式
                type: "GET",
                //成功回调
                success: function (data) {
                    if (data === "1") {
                        //代表后端返回数据正常，数据成功写入数据库了
                        alert("删除成功");
                        obj.del();
                        return;
                    }
                    alert(data);
                },
                //失败回调
                error: function (data) {
                    alert("接口异常，请稍后再试~");
                }
            });
        });
        $("#query").click(function () {
            initTable();
        });
        initTable();

        function initTable() {
            let table = layui.table;
            table.render({
                elem: '#test',
                url: "/s/member/sel?keyword=" + layui.jquery("#keyword").val(),
                page: true,
                limits: ['10', '50', '100'],
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter','exports','print'],
                cols: [[
                    {type: 'checkbox'},
                    {field: 'member_id', title: '序号', sort: true},
                    {field: 'member_email', title: '邮箱'},
                    {field: 'member_power', title: '权限'},
                    {field: 'member_state', title: '状态'},
                    {field: 'login_ip', title: '登录IP'},
                    {field: 'login_address', title: '登录IP'},
                    {field: 'add_time_name', title: '注册时间'},
                    {field: 'right', title: '操作', toolbar: '#opera', width: 88}
                ]]
            });
            table.on('tool(test)', function (obj) {
                if (obj.event === 'edit') {
                    window.open("/pc/index/edit?log_id=" + obj.data.log_id);
                }
                if (obj.event === 'del') {
                    layui.jquery.ajax({
                        //接口地址
                        url: "/s/member/del?id=" + obj.data.log_id,
                        //提交方式
                        type: "GET",
                        //成功回调
                        success: function (data) {
                            if (data === "1") {
                                alert("删除成功")
                                obj.del();
                                return;
                            }
                            alert(data);
                        },
                        //回调失败
                        error: function (data) {
                            alert("接口异常，请稍后再试~")
                        }
                    });
                }
            });
        }
    });
</script>
</body>
</html>
